﻿@using Webdiyer.WebControls.Mvc;
@model Webdiyer.WebControls.Mvc.PagedList<BaseData.Model.Equipment>
@{
    ViewBag.Title = "设备管理";
}
<div>
    <ol class="breadcrumb">
        <li><a href="../Equipments/Index">设备管理</a></li>
        <li><a href="../EquipmentStations/Index">设备点位列表</a></li>
        @*<li><a href="../Departments/Index">点位管理</a></li>*@
    </ol>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-8 col-sm-8 col-md-6 col-lg-10">
                        @using (Ajax.BeginForm("Index", new RouteValueDictionary { { "id", "" } }, new AjaxOptions { UpdateTargetId = "equipment", HttpMethod = "Get", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { { "id", "searchForm" }, { "class", "bs-example bs-example-form" }, { "role", "form" } }))
                        {
                            <div class="row">
                                <div class="col-lg-5 col-md-7">
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="key" id="key" placeholder="设备编号，名称，MAC">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="submit">
                                                查询
                                            </button>

                                        </span>

                                    </div>
                                </div>

                            </div>
                        }
                    </div>
                    <div class=" col-md-1 pull-right">
                        <a href="#" data-toggle="modal" data-backdrop="static" data-target="#myModal" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span> 新建</a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div id="equipment">
                    @Html.Partial("_EquipmentSearchGet", Model)
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新建设备</h4>
            </div>
            <div class="modal-body">
                <div class=" form-horizontal">
                    <div class="form-group">
                        <label for="equno" class="col-sm-2 control-label">设备ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="equno" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="equname" class="col-sm-2 control-label">设备名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="equname"
                                   placeholder="请输入设备名称" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="equmac" class="col-sm-2 control-label">设备MAC</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="equmac"
                                   placeholder="请输入设备MAC">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="equip" class="col-sm-2 control-label">设备IP</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="equip"
                                   placeholder="请输入设备IP">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="equcpu" class="col-sm-2 control-label">CPU类型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="equcpu">
                                <option value="未知">=请选择=</option>
                                <option value="X86">X86</option>
                                <option value="ARM">ARM</option>
                                <option value="mips">mips</option>
                                <option value="xScale">xScale</option>
                                <option value="其他">其他</option>

                            </select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="equStorageType" class="col-sm-2 control-label">存储介质</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="equStorageType">
                                <option value="未知">=请选择=</option>
                                <option value="Sd/cf卡">Sd/cf卡</option>
                                <option value="硬盘">硬盘</option>
                                <option value="Flash">Flash</option>
                                <option value="其他">其他</option>

                            </select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="equType" class="col-sm-2 control-label">设备类型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="equType">
                                <option value=-1>=请选择=</option>
                                <option value=0>多媒体播放器</option>
                                <option value=1>移动终端</option>
                                <option value=2>一体机</option>
                                <option value=3>电子展台</option>
                                <option value=4>交互终端</option>
                                <option value=5>其他</option>
                            </select>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="osType" class="col-sm-2 control-label">操作系统</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="osType">
                                <option value=-1>=请选择=</option>
                                <option value=1>Windows</option>
                                <option value=2>Android</option>
                                <option value=3>Linux</option>
                                <option value=4>IOS</option>
                                <option value=5>其他</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <div class="alert alert-danger" style="display:none" id="errmsg">输出数据不合法，请检查重新输入！</div>
                <button id="save" type="button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-ok"></span> 提交
                </button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span style="cursor:pointer" class="glyphicon glyphicon-remove"></span>关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myEditModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myEditModalLabel">修改设备</h4>
            </div>
            <div class="modal-body">
                <div class=" form-horizontal">
                    <div class="form-group">
                        <label for="edequno" class="col-sm-2 control-label">设备ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edequno" disabled>
                            <input type="hidden" id="estatus" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edequname" class="col-sm-2 control-label">设备名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edequname"
                                   placeholder="请输入设备名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edequmac" class="col-sm-2 control-label">设备MAC</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edequmac"
                                   placeholder="请输入设备MAC">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edequip" class="col-sm-2 control-label">设备IP</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edequip"
                                   placeholder="请输入设备IP">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edequcpu" class="col-sm-2 control-label">CPU类型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edequcpu">
                                <option value="未知">=请选择=</option>
                                <option value="X86">X86</option>
                                <option value="ARM">ARM</option>
                                <option value="mips">mips</option>
                                <option value="xScale">xScale</option>
                                <option value="其他">其他</option>

                            </select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edequStorageType" class="col-sm-2 control-label">存储介质</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edequStorageType">
                                <option value="未知">=请选择=</option>
                                <option value="Sd/cf卡">Sd/cf卡</option>
                                <option value="硬盘">硬盘</option>
                                <option value="Flash">Flash</option>
                                <option value="其他">其他</option>

                            </select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edequType" class="col-sm-2 control-label">设备类型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edequType">
                                <option value=-1>=请选择=</option>
                                <option value=0>多媒体播放器</option>
                                <option value=1>移动终端</option>
                                <option value=2>一体机</option>
                                <option value=3>电子展台</option>
                                <option value=4>交互终端</option>
                                <option value=5>其他</option>
                            </select>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edosType" class="col-sm-2 control-label">操作系统</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edosType">
                                <option value=-1>=请选择=</option>
                                <option value=1>Windows</option>
                                <option value=2>Android</option>
                                <option value=3>Linux</option>
                                <option value=4>IOS</option>
                                <option value=5>其他</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <div class="alert alert-danger" style="display:none" id="ederrmsg">输出数据不合法，请检查重新输入！</div>
                <button id="esave" type="button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-ok"></span> 提交
                </button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span style="cursor:pointer" class="glyphicon glyphicon-remove"></span>关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="SetModal" tabindex="-1" role="dialog" aria-labelledby="SetModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="SetModalLabel">配置点位</h4>
            </div>
            <div class="modal-body">
                <div class=" form-horizontal">
                    <div class="form-group">
                        <label for="setequno" class="col-sm-2 control-label">设备编号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="setequno" disabled>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="curStation" class="col-sm-2 control-label">当前点位</label>
                        <div class="col-sm-10">

                            @*<input type="text" class="form-control" id="curStation" disabled>*@
                            @*<span id="curStation" class="pull-left"></span>*@

                            <div class="alert alert-info" id="curStation">
                                @*<button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">
                                        &times;
                                    </button>*@

                            </div>
                            <input type="hidden" id="esid" />
                            <input type="hidden" id="oldstationid" />
                        </div>
                    </div>
                </div>

                <div class=" form-horizontal">


                    <div class="form-group">
                        <label for="setProject" class="col-sm-2 control-label">所属项目</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="setProject"></select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="setDep" class="col-sm-2 control-label">所属部门</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="setDep"></select>

                        </div>
                    </div>

                    <div class="form-group">
                        <label for="setStation" class="col-sm-2 control-label">所属点位</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="setStation"></select>

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <button id="savestation" type="button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-ok"></span> 提交
                </button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span style="cursor:pointer" class="glyphicon glyphicon-remove"></span>关闭</button>
            </div>
        </div>
    </div>
</div>

@section Scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
    <script>
        Date.prototype.Format = function (fmt) { 
            var o = {
                "M+": this.getMonth() + 1,                 //月份
                "d+": this.getDate(),                    //日
                "h+": this.getHours(),                   //小时
                "m+": this.getMinutes(),                 //分
                "s+": this.getSeconds(),                 //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds()             //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        $(function () {
            $('#myModal').on('show.bs.modal', function () {
                $("#equno").val("OVI" + new Date().Format("yyyyMMddhhmmss"));
            })
            $("#save").bind("click", function () {
                var model = {};
                model.EquipmentID = $("#equno").val();
                model.EquipmentName = $("#equname").val();
                model.EquipmentMac = $("#equmac").val();
                model.EquipmentIP = $("#equip").val();
                model.EquipmentTypeID = $("#equType").val();
                model.EquipmentCPU = $("#equcpu").val();
                model.EquipmentDisk = $("#equStorageType").val();
                model.OsTypeID = $("#osType").val();
                if (model.EquipmentName == "") {
                    $("#equname").parents(".form-group").attr("class", "form-group has-error");
                    return;
                }
                if (model.EquipmentMac == "") {
                    $("#equmac").parents(".form-group").attr("class", "form-group has-error");
                    return;
                }
                $.ajax({
                    url: "/Equipments/Create",
                    type: 'POST',
                    data: { jsonstr: JSON.stringify(model) },
                    success: function (data) {
                        if (data == "OK") {
                            location.href = "/Equipments/Index";
                        }
                        else {
                            $("#errmsg").css("display", "block").text(data);
                        }
                    }, error: function (error) {
                        if (error.status == 500) {
                            $("#errmsg").css("display", "block");
                        }
                    }
                });
            });

            $("#equname").bind("change", function () {
                $(this).parents(".form-group").attr("class", "form-group");
            });
            $("#equmac").bind("change", function () {
                $(this).parents(".form-group").attr("class", "form-group");
                $("#errmsg").css("display", "none");
            });
            $("#edequname").bind("change", function () {
                $(this).parents(".form-group").attr("class", "form-group");
            });
            $("#edequmac").bind("change", function () {
                $(this).parents(".form-group").attr("class", "form-group");
                $("#ederrmsg").css("display", "none");
            });
            ///当点位配置弹出是触发
            $('#SetModal').on('show.bs.modal', function () {
                $.getJSON("/api/ProjectsAPI", function (data) {
                    var item = "<option value=-1>=请选择=</option>";
                    for (var i = 0; i < data.length; i++) {
                        item += ' <option value="' + data[i].ProjectID + '">' + data[i].ProjectName + '</option>';
                    }
                    $("#setProject").empty().append(item);
                    $("#setDep").empty().append("<option value=-1>=请选择=</option>");
                    $("#setStation").empty().append("<option value=-1>=请选择=</option>");
                });
            })
            $("#setProject").bind("change", function () {
                var pid = $(this).val();
                $(this).parents(".form-group").attr("class", "form-group");
                $.getJSON("/api/DepartmentsAPI", { ProjectID: pid }, function (data) {
                    var item = "<option value=-1>=请选择=</option>";
                    for (var i = 0; i < data.length; i++) {
                        item += ' <option value="' + data[i].DepartmentID + '">' + data[i].DepartmentName + '</option>';
                    }
                    $("#setDep").empty().append(item);
                    $("#setStation").empty().append("<option value=-1>=请选择=</option>");
                });
            });
            $("#setDep").bind("change", function () {
                var did = $(this).val();
                $(this).parents(".form-group").attr("class", "form-group");
                $.getJSON("/api/StationsAPI", { DepartmentID: did }, function (data) {
                    var item = "<option value=-1>=请选择=</option>";
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].Status == 0) {
                            item += ' <option value="' + data[i].StationID + '">' + data[i].StationName + '</option>';
                        }
                    }
                    $("#setStation").empty().append(item);
                });
            });

            $("#savestation").bind("click", function () {
                var model = {};
                model.ID = $("#esid").val() == "" ? 0 : $("#esid").val();
                model.EquipmentID = $("#setequno").val();
                model.StationID = $("#setStation").val();
                if (model.StationID == "-1") {
                    $("#setStation").parents(".form-group").attr("class", "form-group has-error");
                    return;
                }
                if (confirm("提示：以下操作将会重新分配点位，是否继续?")) {
                    $.ajax({
                        url: "/Equipments/SetStations",
                        type: 'POST',
                        data: { jsonstr: JSON.stringify(model), oldstationid: $("#oldstationid").val() },
                        success: function (data) {
                            location.href = "/Equipments/Index";
                        }
                    });
                }
            });
        });
        function Delete(id) {
            if (confirm("提示:以下操作将会删除该设备,并移除点位关系,是否继续?")) {
                $.ajax({
                    url: "/Equipments/Delete",
                    type: 'GET',
                    data: { id: id },
                    success: function (data) {
                        location.href = "/Equipments/Index";
                    }
                });
            }
        }
        function Edit(id) {
            $.ajax({
                url: "/Equipments/GetForEdit",
                type: 'GET',
                data: { id: id },
                success: function (data) {
                    $("#estatus").val(data.Status);
                    $("#edequno").val(data.EquipmentID);
                    $("#edequname").val(data.EquipmentName);
                    $("#edequmac").val(data.EquipmentMac);
                    $("#edequip").val(data.EquipmentIP);
                    $("#edequType").val(data.EquipmentTypeID);
                    $("#edequcpu").val(data.EquipmentCPU);
                    $("#edosType").val(data.OsTypeID);
                    $("#edequStorageType").val(data.EquipmentDisk);
                    $('#myEditModal').modal('show');
         
                }
            });
            $("#esave").bind("click", function () {
                var model = {};
                model.Status = $("#estatus").val();
                model.EquipmentID = $("#edequno").val();
                model.EquipmentName = $("#edequname").val();
                model.EquipmentMac = $("#edequmac").val();
                model.EquipmentIP = $("#edequip").val();
                model.EquipmentTypeID = $("#edequType").val();
                model.EquipmentCPU = $("#edequcpu").val();
                model.EquipmentDisk = $("#edequStorageType").val();
                model.OsTypeID = $("#edosType").val();
                if (model.EquipmentName == "") {
                    $("#edequname").parents(".form-group").attr("class", "form-group has-error");
                    return;
                }
                if (model.EquipmentMac == "") {
                    $("#edequmac").parents(".form-group").attr("class", "form-group has-error");
                    return;
                }
                $.ajax({
                    url: "/Equipments/Edit",
                    type: 'POST',
                    data: { jsonstr: JSON.stringify(model) },
                    success: function (data) {
                        if (data == "OK") {
                            location.href = "/Equipments/Index";
                        } else {
                            $("#ederrmsg").css("display", "block").text(data);
                        }
                    }, error: function (error) {
                        if (error.status == 500) {
                            $("#ederrmsg").css("display", "block");
                        }
                    }
                });
            });
        }
        function SetStations(id) {
            $.ajax({
                url: "/Equipments/GetForSetStations",
                type: 'GET',
                data: { id: id },
                success: function (data) {
                    $("#setequno").val(id);
                    if (data != "none") {
                        $("#esid").val(data.ID);
                        $("#oldstationid").val(data.StationID);
                        $("#curStation").text(data.ProjectName + "-" + data.DepartmentName + "-" + data.StationName);
                    }
                    else {
                        $("#curStation").text("当前未配置点位");
                    }
                    $('#SetModal').modal('show');

                }
            });
        }
    </script>
}
